<template>
  <el-table :data="cartData" style="width: 980px">
    <el-table-column prop="name" label="名称" width="130" />
    <el-table-column width="320">
      <template slot-scope="scope">
        <div>
          <img
            :src="'data:image/png;base64,'+scope.row.img"
            :alt="scope.row.name"
            width="150px"
            height="70px"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sellPrice" label="单价" width="132" />
    <el-table-column label="数量" width="212">
      <template slot-scope="scope">
        <el-input-number v-model="scope.row.amount" :min="0" />
      </template>
    </el-table-column>
    <el-table-column label="总价">
      <template slot-scope="scope">
        <div class>{{ parseFloat(scope.row.sellPrice*scope.row.amount).toFixed(1) }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="del(scope.row)" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import * as homeApi from "@/server/home.js";
export default {
  props: ["cartData", "isLogin", "userId"],
  data() {
    return {
      flag: false
    };
  },
  methods: {
    del: function(row) {
      var userId = localStorage.getItem("user");
      if (userId == null) {
        userId = 0;
      }
      homeApi.getUser(userId).then(result => {
        if (result.data.code == 200) {
          this.flag = true;
        }
      });
      if (!this.flag) {
        this.userId = 0;
      }
      homeApi.delCartFood(this.userId, row.foodId).then(result => {
        if (result.data.code == 200) {
          this.$message(
            {
              message: "删除成功",
              type: "success"
            },1000);
          location.reload();
        }
      });
    }
  }
};
</script>
